<template>
    <div class="container">
        <Navbar title="订单详情" left-text="返回" left-arrow @click-left="goBack">
        </Navbar>

        <div class="jd-qrdd-bigbox" @click="toExpress">
            <!--商品地址管理部分-->
            <div class="indent-details-box">
                <span class="indent-details-img1"></span>
                <span class="indent-details-text1">{{ Order.status_text }}</span>
                <span class="indent-details-text2">物流信息：客户签收人： {{ Order.user.nickname }} 已签收
                    感谢使用{{ Order.express.name }}，期待再次为您服务！</span>
                <span class="indent-details-text3">{{ Order.createtime_text }}</span>
            </div>
            <!--地址部分-->
            <van-cell>
                <template #title>
                    <div>
                        <span style="margin-right: 10px;">{{ Address.consignee }}</span>
                        <span style="margin-right: 10px;">{{ Address.mobile }}</span>
                        <van-tag type="primary" size="medium">默认</van-tag>
                    </div>
                </template>
                <template #label>
                    <div>
                        <van-icon name="location-o" size="1rem" />
                        {{ Address.info }}
                    </div>
                </template>
            </van-cell>

            <!--商品部分-->
            <van-cell-group class="mt">
                <van-cell icon="shop-o" title="GumDam社区" style="border-bottom: 1px solid #ccc;">
                    <template #value>
                        <van-button type="primary" size="mini" @click="call">联系客服</van-button>
                    </template>
                </van-cell>
                <van-card v-for="(item, index) in OrderProduct" :key="item.id" :thumb="item.product.cover_cdn">
                    <template #title>
                        <p>商品名: {{ item.product.name }} </p>
                    </template>
                    <template #desc>
                        <p>下单时间： {{ Order.createtime_text }} </p>
                    </template>
                    <template #price>
                        <div class="flex">
                            <div style="display: flex;">单价：<h3>￥ {{ item.price }} </h3>
                            </div>
                            <span>x {{ item.nums }}</span>
                        </div>
                    </template>
                    <template #footer>
                        <div>
                            <van-button type="warning" size="mini" @click="Aftersales">申请售后</van-button>
                        </div>
                    </template>
                </van-card>
            </van-cell-group>

            <van-cell-group class="mt">
                <van-cell title="应付总额" :value="'￥' + Order.total" />
                <van-cell title="商品总价" :value="'￥' + Order.total" />
                <van-cell title="运费" value="￥0.00" />
                <van-cell title="税费" value="￥0.00" />
                <van-cell title="发票信息" value="不需要发票" />
                <van-cell title="备注信息" :value="Order.content" />
            </van-cell-group>

            <!--订单编号部分-->
            <van-cell-group class="mt">
                <van-cell :title="'订单编号: ' + Order.code" />
                <van-cell title="支付方式: 微信" />
                <van-cell :title="'快递公司: ' + expName" />
                <van-cell :title="'快递单号: ' + Order.expcode" />
                <van-cell :title="'下单时间: ' + Order.createtime_text" />
            </van-cell-group>
        </div>


    </div>
</template>

<script>
import Navbar from '../Navbar.vue'
export default {
    name: "OrderDetails",
    data() {
        return {
            orderid: this.$route.query.orderid ? this.$route.query.orderid : 0,
            userid: this.$cookies.get('ShopUser').id,
            Address: [],
            Order: [],
            OrderProduct: [],
            expName: ''
        }
    },
    methods: {
        call() {
            this.$dialog.confirm({
                title: '联系客服',
                message: '联系客服热线：4008-123-123',
                theme: 'round-button',
                confirmButtonText: '立即拨打'
            }).then(() => {
                // on confirm
                window.location.href = 'tel://4008-123-123'
            });
        },
        Aftersales() {
            this.$dialog.confirm({
                title: '提示',
                message: '暂无售后服务,敬请期待',
                theme: 'round-button',
            })
        },
        goBack() {
            this.$router.go(-1);
        },
        async initOrderInfo() {
            let res = await this.$api.initOrderInfo({ orderid: this.orderid });
            console.log(res.data);
            if (res.code === 1) {
                this.Address = res.data.Address
                this.Order = res.data.Order
                this.OrderProduct = res.data.OrderProduct

                this.expName = this.Order.express.name

                let info = "";

                if (this.Address.provinces) {
                    info += `${this.Address.provinces.name}-`;
                }

                if (this.Address.citys) {
                    info += `${this.Address.citys.name}-`;
                }

                if (this.Address.districts) {
                    info += `${this.Address.districts.name} `;
                }

                if (this.Address.address) {
                    info += `${this.Address.address}`;
                }
                this.Address.info = info
            } else {
                console.log(res.msg);
            }
        },
        toExpress() {
            this.$router.push({ path: '/user/order/express', query: { orderid: this.orderid } })
        }
    },
    created() {
        this.initOrderInfo()
    },
    components: {
        Navbar,
    }
}
</script>

<style scoped>
@import url('/assets/css/indent-details.css');

.mt {
    margin-top: 10px;
}

:deep(.van-card) {
    margin-top: 0;
}

:deep(.van-card__content) {
    justify-content: space-evenly
}

:deep(.van-card__price) {
    width: 100%;
}

.flex {
    display: flex;
    justify-content: space-between;
}
</style>